<template>
	<view class="articleItem">
		<view class="head">
			<view class="userInfo">
				<view class="avatar">
					<image :src="articleListItem.user_id[0].avatar_file.url" mode="aspectFill"></image>
				</view>
				<view class="userName">	{{articleListItem.user_id[0].nickname}}</view>
				<view class="time"><uni-dateformat :date="articleListItem.publish_date" :threshold="[0,3600000]"></uni-dateformat></view>
			</view>
			<view class="moreIcon">
				<u-icon name="more-dot-fill" size=20></u-icon>
			</view>
		</view>
		<view class="article" >
			<view class="title" @click="toDetail">
				{{articleListItem.title}}
			</view>
			<view class="content" @click="toDetail">
				<view class="t">
					{{articleListItem.description}}
				</view>
			</view>
			<view class="piclist">
				<view class="pic" :class="picArr.length==1 ? 'only': ''" v-for="(item,index) in articleListItem.picurls" :key="item">
					<image @click="previewImg(index)" :src="item" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="articleInfo">
			<view class="box"> <u-icon name="eye"></u-icon><text>{{articleListItem.view_count}}</text></view>
			<view class="box"> <u-icon name="more-circle"></u-icon><text>{{articleListItem.comment_count}}</text></view>
			<view class="box"><u-icon  name="thumb-up"></u-icon> <text>{{articleListItem.like_count}}</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "article-item",
		props:['articleListItem'],
		data() {
			return {
				picArr: [1, 2, 3]

			};
		},
		methods:{
			previewImg(index){
				uni.previewImage({
					urls:this.articleListItem.picurls,
					current:index
				})
			},
			toDetail(){
				uni.navigateTo({
					url:`/pages/articleDetail/articleDetail?id=${this.articleListItem._id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.articleItem {
		padding: 30rpx;
		background-color: #fff;
		margin-bottom: 15rpx;
		.head {
			display: flex;
			justify-content: space-between;

			.userInfo {
				display: flex;

				.avatar {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.userName {
					color: #222;
					font-size: 30rpx;
					padding-left: 10rpx;
					line-height: 50rpx;
				}

				.time {
					color: #888;
					font-size: 25rpx;
					padding-left: 20rpx;
					line-height: 52rpx;
				}

				.moreIcon {
					padding: 10rpx;
				}
			}

			.moreIcon {
				padding: 10rpx;
				padding-right: 20rpx;

			}
		}

		.article {
			padding: 15rpx 0 30rpx;

			.title {
				font-size: 44rpx;
				color: #000;
				font-weight: 600;
				text-align: justify;

			}

			.content {
				padding-top: 10rpx;
				padding-bottom: 10rpx;
				font-size: 30rpx;
				text-align: justify;
				color: #888;

				.t {
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}

			.piclist {
				display: flex;
				padding-top: 20rpx;

				.pic {
					width: 225rpx;
					height: 225rpx;
					margin-right: 6rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}

					&:first-child {
						border-radius: 20rpx 0 0 20rpx;
					}

					&:last-child {
						border-radius: 0 20rpx 20rpx 0;
					}

					&.only {
						border-radius: 20rpx;
					}

				}

			}
			
		}
	}
	.articleInfo{
		display: flex;
		align-items: center;
		justify-content:space-around;
		font-size: 26rpx;	
		color:#333;
		.box{
			display: flex;
			align-items: center;			
			padding:15rpx 0 5rpx;
			flex:1;
			display: flex;
			justify-content: center;
		}
	}
</style>